<template>
  <div class="welcome">
    <div class="welcome_title">
		<a-card style="background-color: #27A6FE;">
			<h1> 早安，Serati Ma ，祝你开心每一天！</h1>
			<p>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</p>
		</a-card>
	</div>
	<div class="welcome_contxt">
		<div class="welcome_contxt_left">
			<div>
				<a-card>
					<a-empty v-if="matterData.length === 0 ? true : false" />
					<div class="matterData">
						<div v-for="(item,ind) in matterData" :key="ind">
							<div>{{item.name}}</div>
							<div>{{item.value}}</div>
						</div>
					</div>
				</a-card>
			</div>
			<div>
				<a-card title="动态">
					<dynamic :dynamicContxt="dynamicContxt" />
				</a-card>
			</div>
		</div>
		<div class="welcome_contxt_right">
			<div class="welcome_contxt_right_img">
				<img src="https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png" />
			</div>
			<div>
				<a-card
					style="width:100%"
					:tab-list="tabListNoTitle"
					:active-tab-key="noTitleKey"
					@tabChange="key => onTabChange(key, 'noTitleKey')"
				>
				  <div v-if="noTitleKey === '我的' || noTitleKey === '我的收藏'">
					<te-am :teamContxt="teamContxt" />
				  </div>
				</a-card>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import team from '@/components/team.vue'
import dynamic from '@/components/dynamic.vue'
export default {
  name: 'welcome',
  data() {
	return {
		dynamicContxt: [],
		teamContxt: [],
		matterData: [],
		tabListNoTitle: [
			{
			  key: '我的',
			  tab: '我的',
			},
			{
			  key: '我的收藏',
			  tab: '我的收藏',
			}
		],
		noTitleKey: '我的'
	}
  },
  components: {
  	"dynamic": dynamic,
	"te-am": team
  },
  created(){
	  this.teamContxt = this.$store.state.teamContxt
	  this.matterData = this.$store.state.matterData
	  this.dynamicContxt = this.$store.state.dynamicContxt
  },
  methods: {
	onTabChange(key, type) {
		this[type] = key;
	},
  }
}
</script>
<style lang="less" scoped>
	.welcome{
		margin: 12px;
		.welcome_title{
			padding:0 12px;
			h1{
				font-size: 24px;
				color: white;
			}
			p{
				color: white;
			}
		}
		.welcome_contxt{
			display: flex;
			margin-top: 24px;
			.welcome_contxt_left{
				padding:0 12px;
				flex: 6;
				.matterData{
					display: flex;
				}
				.matterData>div{
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.matterData>div:nth-child(2){
					border-right: 1px solid #f0f0f0;
					border-left: 1px solid #f0f0f0;
				}
				.matterData>div:nth-child(3){
					border-right: 1px solid #f0f0f0;
				}
				.matterData>div>div:nth-child(1){
					margin-bottom: 4px;
					color: rgba(0,0,0,.45);
					font-size: 14px;
				}
				.matterData>div>div:nth-child(2){
					color: rgba(0,0,0,.85);
					font-size: 24px;
				}
			}
			.welcome_contxt_left>div{
				margin-bottom: 24px;
			}
			.welcome_contxt_right{
				padding:0 12px;
				flex: 3;
				.welcome_contxt_right_img{
					margin-bottom: 24px;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
